<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动隐藏，回滚显示</title>

<style>
	*{padding: 0;margin: 0;text-align: center}
	.nav{width: 100%; background-color:blue; color:#fff; font-size:24px; padding:5px;
		position: fixed; top:0; left:0;right: 0; 
/*		transition: top .5s;*/
	}
	.text{}
</style>

</head>

<body>
<div class="top">
	顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>顶部的文字说明啊<br>
</div>
<div  class="nav" >
	滚动显示或隐藏的菜单文字、菜单文字、菜单文字
</div>

<div  class="text">
	下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="scroll-up-bar.js"></script>
<script>
    $('.nav').scrollupbar();

  </script>

</body>
</html>
